<template>
    <iframe id="mainIframe" v-if="showType == 'iframe'" class="iframe" :src="videoSource" ref="iframe"
        :class="[!isOffice(docType) && 'iframe-class']"></iframe>
    <imgViewer v-if="showType == 'img'" :viewerList="[videoSource]"></imgViewer>
    <pdfViewerPage v-if="showType == 'pdf'" :printTitle="knowledgeInfo.name" ref="viewFileRef" :pdfUrl="videoSource"
        @renderFinish="renderFinish"></pdfViewerPage>
    <el-input v-if="tetVal && showType == 'utf-8'" autosize type="textarea" readonly ref="textareaInput" v-model="newText"
        class="textareaInput"></el-input>
    <div v-if="showType == 'error'" style="display: flex;align-items: center;justify-content: center;">
        <img :src="noReadPng" />
    </div>
    <Vue3VideoPlay width="100%" height="100%" v-if="showType == 'video'" :src="videoSource" :autoplay="false"
        preload="nona" :title="knowledgeInfo.name" @renderFinish="renderFinish" />
    <topology v-if="showType == 'document_flow'" :id="docId" :readonly="true" :formShare="formShare"
        @renderFinish="renderFinish"></topology>
    <aomao-editor v-if="showType == 'document_html'" :isRead="true" :id="docId" :formShare="formShare" ref="aomaoEditor"
        @renderFinish="renderFinish" />
    <MindElixir v-if="showType == 'document_map'" :id="docId" :readonly="true" :formShare="formShare"
        @renderFinish="renderFinish"></MindElixir>
    <xmind-map v-if="showType == 'xmind'" :id="docId" :isRead="true" :formShare="formShare"
        @renderFinish="renderFinish"></xmind-map>
    <LuckySheet v-if="showType == 'document_xlsx'" :id="docId" :readonly="true" :formShare="formShare"
        @renderFinish="renderFinish"></LuckySheet>
    <editorMd v-if="showType == 'md'" :id="docId" :mdIsPreview="true" :formShare="formShare"
        @renderFinish="renderFinish"></editorMd>
    <epubView v-if="showType == 'epub'" ref="readerView" :isEpubUrl="isEpubUrl" :id="docId" @renderFinish="renderFinish">
    </epubView>
    <ofdView v-if="showType == 'ofd'" :id="knowledgeInfo.id" :nodeInfo="knowledgeInfo" @renderFinish="renderFinish">
    </ofdView>
</template>

<script setup lang="ts">
import {
    ref,
    watch,
    onMounted
} from 'vue'
import Vue3VideoPlay from 'vue3-video-play'
import editorMd from '@/components/editorMd/index.vue'
import ofdView from '@/components/ofd/index.vue'
import epubView from '@/components/epub/index.vue'
import LuckySheet from "@/components/luckySheet/index.vue";
import xmindMap from '@/components/xmind-map/index.vue'
import MindElixir from "@/components/mindElixir/index.vue";
import AomaoEditor from "@/components/aomaoEditor/index.vue";
import pdfViewerPage from '@/components/pdfViewerPage/index.vue'
import topology from "@/components/topology/index.vue";
import imgViewer from '@/components/imgViewer/index.vue'
import noReadPng from '@/assets/images/common/noread.png'

import { isOffice } from '@/utils/util'


const emit = defineEmits(["renderFinish"])
const props = defineProps({
    knowledgeInfo: {
        type: Object,
        default() {
            return {}
        }
    },
    formShare: Boolean,
    docId: String,
    isEpubUrl: String,
    showType: String,
    videoSource: String,
    tetVal: {
        type: String,
        default: ''
    }
})
const newText = ref('')
const iframe = ref()
watch(() => props.tetVal, (newV) => {
    newText.value = newV
})
onMounted(() => {
})
function renderFinish() {
    emit('renderFinish')
}
</script>
<style lang="scss" scoped></style>